<template>
    <div class="content_detail">
        <div class="content_left">
            <div class="list_item mt20">
                <MaterialContent
                    ref="materialContentRef"
                    :max-num="8"
                    :input-content-tabs="inputContentTabs"
                    :show-material-tabs="showMaterialTabs"
                    :input-content-data="inputContentData"
                    :material-content-data="materialContentData"
                    :re-key="props.domId"
                    :placeholder="'请输入欢迎语'"
                    @change="changeMaterial" />
            </div>
        </div>
        <div class="content-right">
            <PhonePreview ref="phonePreviewRef" :re-key="props.domId" />
        </div>
    </div>
</template>

<script setup lang="ts">
import MaterialContent from '@/components/zw/materialContent/index.vue';
import PhonePreview from '@/components/zw/phonePreview/welcomePhonePreview/materialPreview/index.vue';
import { initMaterialData } from '@/utils/utils';
import { ref, reactive, onMounted } from 'vue';
const materialContentRef = ref<HTMLElement | null>();
const phonePreviewRef = ref<HTMLElement | null>();
const inputContentTabs = ref<Array<number>>([1, 2, 3, 5, 6]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '6', '7', '9', '11', '10']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]);
const props = defineProps({
    pagType: {
        type: String,
        default: ''
    },
    domId: {
        type: String,
        default: 'inputId'
    },
    content: {
        type: String,
        default: ''
    }
});

const formData = ref<any>({});
const changeMaterial = (val: any) => {
    formData.value = val.welcome_info;
};

const previewData = ref<any>([]);

const onLookData = (val: any) => {
    inputContentData.value = val.welcome_text;
    materialContentData.value = initMaterialData(val.welcome_material);
};

onMounted(() => {
    inputContentData.value = props.content;
});
defineExpose({
    formData,
    previewData,
    onLookData
});
</script>

<style lang="scss" scoped>
.content_detail {
    padding: 20px;
    box-sizing: border-box;
    display: flex;

    .content_left {
        flex: 1;
        padding-right: 48px;
        border-right: 1px solid #eee;

        .list_item {
            padding-left: 1.125rem;
            padding-bottom: 24px;
            border-bottom: 0.0625rem solid #eaeaea;
        }

        .mt20 {
            margin-top: 1.25rem;
        }
    }

    .content-right {
        padding: 0 24px 0 48px;

        .title {
            text-align: center;
            line-height: 3.5;
            font-size: 14px;
            color: #333;
        }
    }
}
</style>
